<template>
  <el-drawer
    title="志愿者详情"
    :visible.sync="visible"
    direction="rtl"
    :modal="false"
    size="560px"
  >
    <el-row>
      <el-col :span="5">姓名</el-col>
      <el-col :span="18">{{volunteerInfo.name}}</el-col>
    </el-row>
    <el-row>
      <el-col :span="5">性别</el-col>
      <el-col :span="18">{{volunteerInfo.gender}}</el-col>
    </el-row>
    <el-row>
      <el-col :span="5">年龄</el-col>
      <el-col :span="18">{{volunteerInfo.age}}</el-col>
    </el-row>
    <el-row>
      <el-col :span="5">身份证号码</el-col>
      <el-col :span="18">{{volunteerInfo.idcard}}</el-col>
    </el-row>
    <el-row>
      <el-col :span="5">手机号</el-col>
      <el-col :span="18">{{volunteerInfo.phone}}</el-col>
    </el-row>
    <el-row>
      <el-col :span="5">服务社区</el-col>
      <el-col :span="18">{{volunteerInfo.serviceOrgName}}</el-col>
    </el-row>
    <el-row>
      <el-col :span="5">服务地址</el-col>
      <el-col :span="18">{{volunteerInfo.serviceAddress}}</el-col>
    </el-row>
    <el-row>
      <el-col :span="5">服务领域</el-col>
      <el-col :span="18">{{volunteerInfo.professionText}}</el-col>
    </el-row>
    <el-row>
      <el-col :span="5">公益积分</el-col>
      <el-col :span="18">{{volunteerInfo.score}}</el-col>
    </el-row>
    <el-row>
      <el-col :span="5">简介</el-col>
      <el-col :span="18">{{volunteerInfo.volunteerDesc}}</el-col>
    </el-row>
    <el-row>
      <el-col :span="5">注册时间</el-col>
      <el-col :span="18">{{volunteerInfo.registerTime}}</el-col>
    </el-row>

    <el-row>
      <el-col :span="5">
        <el-link type="warning" @click="onHelpRecordClick">服务记录</el-link>
      </el-col>
    </el-row>
  </el-drawer>
</template>

<script>
export default {
  pageProps: {
    title: '志愿者详情'
  },
  data() {
    return {
      visible: false,
      volunteerInfo: {}
    };
  },
  methods: {
    async show(userId) {
      this.visible = true;
      this.volunteerInfo = await this.$http.get('/api/volunteer/volunteer', {params: {userId}});
    },
    onHelpRecordClick() {
      const { volunteerInfo: volunteer } = this;
      this.pushPage({
        path: '/volunteer/volunteer/help-record',
        params: { volunteer },
        key: volunteer.userId,
        subTitle: volunteer.name
      });
    }
  }
}
</script>


<style scoped>
.el-row {
  font-size: 14px;
  line-height: 40px;
}
.el-col-5 {
  padding-right: 16px;
  text-align: right;
  color: #606266;
} 
</style>
